<template>
  <el-row :gutter="24">
    <el-col :span="18" :xs="24">
      <!-- 列表 -->
      <ContentWrap class="mt-10px">
        <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
          <el-table-column label="序号" type="index" width="60px" />
          <el-table-column
            :formatter="dateFormatter2"
            align="center"
            label="填报日期"
            prop="date"
          />
          <el-table-column align="center" label="资料类型" prop="dataType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.CRM_ELECTRIC_DRAWING_TYPE" :value="scope.row.dataType" />
            </template>
          </el-table-column>
          <el-table-column label="附件">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.fileUrls`" class="mb-0px!">
                <UploadFile v-model="row.fileUrls" disabled/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="remark"/>
          
        </el-table>
      </ContentWrap>
    </el-col>
    <!-- 右侧操作日志 -->
    <el-col :span="6" :xs="24">
      <OperateLogV2 :log-list="logList" />
    </el-col>
  </el-row>

</template>
<script lang="ts" setup>
import { ProjectApi,ProjectVO } from '@/api/crm/project'
import { dateFormatter2 } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'

defineOptions({ name: 'ProjectElectricDetail' })
const { project } = defineProps<{
  project: ProjectVO // 项目主表
}>()

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => project.id,
  async (val) => {
    if (!val) {
      loading.value = false
      return;
    }
    try {
      loading.value = true
      list.value = await ProjectApi.getProjectElectricListByProjectId(val)
      await getOperateLog()
    } finally {
      loading.value = false
    }
  },
  { immediate: true }
)

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!project.id) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_PROJECT_ELECTRIC,
    bizId: project.id
  })
  logList.value = data.list
}

</script>
